<template>
	<div class="homeTitle_com">
		<div class="coin_box">
			<div class="coin_name">
				<img :src="matches?.base_currency?.logo" class="img" />
				{{matches.symbol ? matches.symbol : ''}}
				<el-popover placement="bottom" width="340" trigger="click" :visible-arrow="false"
					popper-class="coin_tick tick popoverWidth marT mobile_tick" v-model="hasCoin" :offset="20" style="padding-top: 4px;">
					<img src="@/assets/images/home/xia.png" class="icon" slot="reference" />
					<div class="coin_detail_box">
						<div class="coin_detail_item">
							<div>{{$t('home.pair')}}</div>
						</div>
						<div class="coin_detail_item">
							<div>{{$t('home.price')}}</div>
						</div>
						<div class="coin_detail_item">
							<div>24h</div>
						</div>
					</div>
					<div class="coin_detail_box coin_detail_box2 cur_p" v-for="(item,index) in allMatches" :key="index"
						@click="handleMatches(item)">
						<div class="coin_detail_item">
							<p style="display: flex;align-items: center; white-space: nowrap;">
								<img :src="item?.base_currency?.logo" style="width: 20px;margin-right: 7px;" />
								{{item.symbol}}
							</p>
						</div>
						<div class="coin_detail_item">
							<p>{{oneMinPrice && oneMinPrice[item.binance_symbol] ? oneMinPrice[item.binance_symbol].close : '0.00'}}
							</p>
						</div>
						<div class="coin_detail_item">
							<p
								:style="`color: ${oneMinPrice && oneMinPrice[item.binance_symbol] && oneMinPrice[item.binance_symbol].increase > 0 ? '#2ECC71' : '#FF5449'}`">
								{{oneMinPrice && oneMinPrice[item.binance_symbol] && oneMinPrice[item.binance_symbol].increase}}%
							</p>
						</div>
					</div>
				</el-popover>
			</div>
			<div class="up_down zhang" :style="{color: priceType == 1 ? '#2ECC71' : '#FF5449'}">
				<img :src="priceType == 1 ? require('@/assets/images/home/zhang.png') : require('@/assets/images/home/die.png')"
					class="ig" />
				{{oneMinPrice && oneMinPrice[matches.binance_symbol] ? oneMinPrice[matches.binance_symbol].close : ''}}
			</div>
		</div>
		<div>
			<div class="tool_box">
				<el-popover placement="bottom" width="55" trigger="click" :visible-arrow="false" popper-class="tick"
					v-model="hasTick">
					<div class="tick" slot="reference">
						{{activeTick}}
						<i class="el-icon-caret-bottom"></i>
					</div>
					<div class="tick_item" v-for="(item,index) in tickList" :key="index" @click="handleTick(item)">
						{{item}}
					</div>
				</el-popover>
				<el-popover placement="bottom" width="250" trigger="click" :visible-arrow="false" popper-class="tick"
					v-model="hasSet">
					<div class="item_box" slot="reference">
						<img src="@/assets/images/home/set.png" />
					</div>
					<div class="time_item set_box" :class="activeSetList.includes(index) ? 'active' : ''"
						v-for="(item,index) in setList" :key="index" @click="handleSet(index)">
						<i class="el-icon-check" v-if="activeSetList.includes(index)"></i>
						<span>{{item}}</span>
					</div>
				</el-popover>
				<div class="item_box" style="margin-right: 0;" @click="handleHis()">
					<img src="@/assets/images/home/history.png" />
				</div>
			</div>
		</div>
		<!-- 历史记录 -->
		<BettingRecord v-model="hasShow" v-if="hasShow" />
	</div>
</template>

<script>
	import {
		marketCurrencyMatches
	} from '@/api/home'
	// import BettingRecord from '../bettingRecordNew.vue'
	// import {
	// 	closeSock,
	// 	sendSock
	// } from "@/utils/websocket";
	export default {
		props: {},
		components: {
			BettingRecord:  () => import('../bettingRecordNew.vue'),
		},
		data() {
			return {
				hasTick: false,
				hasSet: false,
				hasCoin: false,
				hasShow: false,
				priceType: 1,
				activeTick: 'Tick',
				tickList: ['Tick', '1m', '5m', '1h', '4h', '1d'],
				// setList: ['Show Public Bets on chart', 'Show my Bets on chart', '1-click trade'],
				activeSetList: [0, 1, 2],
				// info: {},
			}
		},
		computed: {
			oneMinPrice() {
				return this.$store.state.oneMinPrice
			},
			setList() {
				return [this.$t('home.showPublicBets'), this.$t('home.showMyBets'), this.$t('home.oneClick')]
			},
			matches() {
				return this.$store.state.matches
			},
			allMatches() {
				return this.$store.state.allMatches
			}
		},
		watch: {
			oneMinPrice: {
				handler(val, oldval) {
					if (val[this.matches.binance_symbol] && oldval[this.matches.binance_symbol]) {
						if (val[this.matches.binance_symbol].close > oldval[this.matches.binance_symbol].open) {
							this.priceType = 1
						} else {
							this.priceType = 2
						}
					}
				},
				deep: true
			}
		},
		mounted() {
			// this.getMarketInfo()
			// if (localStorage.getItem('openOrder') === 'true') {
			// 	this.activeSetList.push(0)
			// }
			// if (localStorage.getItem('myOrder') === 'true') {
			// 	this.activeSetList.push(1)
			// }
			// if (localStorage.getItem('1click') === 'true') {
			// 	this.activeSetList.push(2)
			// }
			if (!localStorage.getItem('openOrder')) {
				localStorage.setItem('openOrder', true)
			}
			if (!localStorage.getItem('myOrder')) {
				localStorage.setItem('myOrder', true)
			}
			if (!localStorage.getItem('1click')) {
				localStorage.setItem('1click', true)
			}

			if (localStorage.getItem('Tick')) {
				this.activeTick = localStorage.getItem('Tick')
			}
		},
		methods: {
			handleTick(item) {
				this.activeTick = item
				localStorage.setItem('Tick', item)
				this.$store.commit('upDataTick', item)
				this.hasTick = false
			},
			handleHis() {
				// this.$router.push('/mobile/bettingRecord')
				this.hasShow = true;
			},
			handleSet(index) {
				if (this.activeSetList.includes(index)) {
					let fidIndex = this.activeSetList.findIndex(i => i === index)
					this.activeSetList.splice(fidIndex, 1)
				} else {
					this.activeSetList.push(index)
				}
				if (index == 0) {
					localStorage.setItem('openOrder', this.activeSetList.includes(index))
				}
				if (index == 1) {
					localStorage.setItem('myOrder', this.activeSetList.includes(index))
				}
				if (index == 2) {
					localStorage.setItem('1click', this.activeSetList.includes(index))
				}
			},
			async handleMatches(item) {
				// console.log('item', item);
				if (item.id == this.matches.id) return
				// await closeSock()
				this.$store.commit('changeMatches', item)
				localStorage.setItem('matches', JSON.stringify(item))
				this.hasCoin = false;
			}
			// async getMarketInfo() {
			// 	const res = await marketCurrencyMatches()
			// 	if (res && res.code == 1) {
			// 		this.info = res.data[0]
			// 		this.$store.commit('changeMatches', this.info.matches[0])
			// 	}
			// }
		}
	}
</script>

<style scoped lang="less">
	.homeTitle_com {
		display: flex;
		justify-content: space-between;
		padding-top: 20px;
		margin-bottom: 30px;
		// font-weight: bold;

		.coin_box {
			.coin_name {
				display: flex;
				align-items: center;
				font-size: 20px;
				margin-bottom: 4px;

				.img {
					width: 32px;
					height: 32px;
					margin-right: 6px;
				}

				.icon {
					width: 20px;
					height: 20px;
					margin-left: 5px;
				}
			}

			.up_down {
				display: flex;
				align-items: center;
				font-size: 14px;

				.ig {
					width: 9px;
					height: 9px;
					margin-right: 6px;
				}
			}

			.zhang {
				color: #2ECB71;
			}

			.die {
				color: #FF5449;
			}
		}

		.tool_box {
			display: flex;
			align-items: center;

			.tick {
				width: 55px;
				height: 32px;
				background-color: #212A36;
				border-radius: 10px;
				margin-right: 8px;
				display: flex;
				align-items: center;
				justify-content: center;

				i {
					margin-left: 5px;
				}
			}



			.item_box {
				width: 32px;
				height: 32px;
				background-color: #212A36;
				border-radius: 10px;
				margin-right: 8px;
				display: flex;
				align-items: center;
				justify-content: center;

				img {
					width: 15px;
				}
			}

			// .item_box:last-of-type {
			// 	margin-right: 0;
			// }
		}
	}
</style>
<style lang="less">
	body .tick_item {
		text-align: center;
		margin-bottom: 15px;

	}

	body .time_item.set_box {
		color: #fff;
		padding-left: 6.5px;

		span {
			width: 80%;
			text-align: left;
			margin-left: 10px;
		}

		&.active {
			background-color: transparent;
		}
	}

	body .tick_item:last-of-type {
		margin-bottom: 0;
	}

	body .coin_tick.mobile_tick {
		// margin-top: 12px !important;

		.coin_detail_box {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.coin_detail_item {
				flex: 4;
				text-align: center;

				>div {
					color: #A4A8AB;
					font-size: 14px;
					// margin-bottom: 20px;
					text-align: center;
				}

				p {
					font-size: 14px;
					color: #fff;
					text-align: center;
				}
			}

			.coin_detail_item:first-of-type {
				flex: 3;
			}
			
			.coin_detail_item:last-of-type {
				flex: 2;
			}
		}
	}

	body .popoverWidth {
		width: calc(100vw - 40px) !important;
		left: 20px !important;
	}
	body .marT[x-placement^=bottom] {
		margin-top: 30px;
	}
</style>